<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: #f4f4f9;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 100vh;*/
            margin: 0;
        }

        h1 {
            color: #333;
        }

        #userForm {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width:800px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        label {
            font-weight: bold;
            margin-top: 10px;
            align-self: flex-start;
        }

        input, textarea, select {
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ddd;
            border-radius: 5px;
            transition: border-color 0.3s;
            width: 100%;
        }

        input:focus, textarea:focus, select:focus {
            border-color: #007bff;
            outline: none;
        }

        input[readonly], textarea[readonly] {
            background-color: #e9ecef;
        }

        .image-container {
            position: relative;
            display: inline-block;
        }

        #avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            object-fit: cover;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            display: block;
        }

        .hover-text {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(228, 228, 228, 0.7);
            color: #8c8b8b;
            padding: 5px 10px;
            border-radius: 5px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 14px;
            width: 60px;
            text-align: center;
        }

        .image-container:hover .hover-text {
            opacity: 1;
        }

        #fileInput {
            display: none;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            margin-left: 5%;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            transition: background-color 0.3s, transform 0.2s;
        }

        #editButton {
            background-color: #007bff;
            color: #fff;
        }

        #saveButton {
            background-color: #28a745;
            color: #fff;
            display: none;
        }

        button:hover {
            transform: scale(1.05);
        }

        button:active {
            transform: scale(0.95);
        }

        button:disabled {
            background-color: #ddd;
            cursor: not-allowed;
        }
        .form-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-top: 20px;
        }
        .form-group {
            display: flex;
            align-items: center;
        }
        .form-group label {
            margin-right: 10px;
            margin-top: 10px;
            width: 130px;
        }
        .form-group input, .form-group select {
            margin-right: 10px;
        }
        .input-pair {
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body>
<form id="userForm">
    <h1>用户信息</h1>


<!--    <img id="avatar" src="/icon/个人.png" alt="用户头像">-->
<!--    <input type="file" id="fileInput" accept="image/*">-->
    <div class="image-container">
        <img id="avatar" src="/icon/个人.png" alt="用户头像">
        <div class="hover-text">修改头像</div>
        <input type="file" id="fileInput" accept="image/*">
    </div>


    <div class="form-container">
        <div class="form-group">
            <label for="userName" style="position: relative; left:30px">用户名:</label>
            <input type="text" id="userName" name="userName" readonly>
        </div>
        <div class="form-group">
            <label for="phoneNumber" style="position: relative; left:40px">电话:</label>
            <input type="text" id="phoneNumber" name="phoneNumber" readonly>
        </div>
    </div>

    <div class="form-container">
        <div class="form-group" style="margin-right: 115px;">
            <label for="email" style="position: relative; left:45px">邮箱:</label>
            <input type="text" id="email" name="email" readonly>
        </div>
        <div class="form-group">
            <label for="sex" style="position: relative; left:-80px">性别:</label>
            <select id="sex" name="sex" style="position: relative; left:-105px" disabled>
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="其他">其他</option>
            </select>
        </div>
    </div>

    <div class="form-container">
        <div class="form-group">
            <label for="occupation"  style="position: relative; left:45px">职业:</label>
            <input type="text" id="occupation" name="occupation" readonly>
        </div>
        <div class="form-group" >
            <label for="age"  style="position: relative; left:40px">年龄:</label>
            <input type="text" id="age" name="age" readonly>
        </div>
    </div>

    <label for="address" style="position: relative; left:90px;top:40px">地址:</label>
    <textarea id="address" name="address" rows="2"  style="width:60%" readonly></textarea>

    <div class="button-container">
        <button type="button" style="width: 150px;letter-spacing: 10px;text-align: center" id="editButton">修改</button>
        <button type="button" style="width: 150px;letter-spacing: 10px;text-align: center" id="saveButton">保存</button>
    </div>
</form>

<script>
    // 从 localStorage 获取 userId
    const userId = localStorage.getItem('userId');
    const token = localStorage.getItem('token');

    if (userId) {
        fetch(`http://localhost:8080/user/getUserById?userId=${userId}`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${token}`
            }
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    // Display user data in the form
                    document.getElementById('userName').value = data.data.userName;
                    document.getElementById('phoneNumber').value = data.data.phoneNumber;
                    document.getElementById('email').value = data.data.email;
                    document.getElementById('sex').value = data.data.sex;
                    document.getElementById('address').value = data.data.address;
                    document.getElementById('occupation').value = data.data.occupation;
                    document.getElementById('age').value = data.data.age;
                    document.getElementById('avatar').src = data.data.avatar;
                    document.getElementById('avatarUrl').value = data.data.avatar;
                } else {
                    alert('Failed to fetch user data: ' + data.msg);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    } else {
        alert('User ID not found');
    }


    // 切换到编辑状态
    document.getElementById('editButton').addEventListener('click', () => {
        const form = document.getElementById('userForm');
        const inputs = form.querySelectorAll('input, textarea, select'); // 包含 select 和 textarea
        inputs.forEach(input => {
            input.removeAttribute('readonly');
            input.removeAttribute('disabled'); // 移除 select 的 disabled 属性
            input.style.backgroundColor = "#fff"; // 切换到白色背景
        });

        document.getElementById('editButton').style.display = 'none';
        document.getElementById('saveButton').style.display = 'inline';
    });

    document.getElementById('saveButton').addEventListener('click', () => {
        // 从 localStorage 中获取 userId
        const userId = localStorage.getItem('userId');

        const formData = {
            userId: userId,
            userName: document.getElementById('userName').value,
            phoneNumber: document.getElementById('phoneNumber').value,
            email: document.getElementById('email').value,
            sex: document.getElementById('sex').value,
            address: document.getElementById('address').value,
            occupation: document.getElementById('occupation').value,
            age: document.getElementById('age').value
        };

        // 提交到后端
        fetch('http://localhost:8080/user/updateUser', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => response.json())
            .then(responseData => {
                if (responseData.code === 1) {
                    // 成功提示
                    alert('修改成功');
                } else {
                    alert('修改失败: ' + responseData.msg);
                }
            })
            .catch(error => {
                alert('提交时发生错误: ' + error.message);
            });



        // 提交成功后，切换回查看模式
        const inputs = document.querySelectorAll('input, textarea, select'); // 包含 select 和 textarea
        inputs.forEach(input => {
            input.setAttribute('readonly', true);
            input.setAttribute('disabled', true); // 恢复 select 的 disabled 属性
            input.style.backgroundColor = "#e9ecef"; // 切换回灰色背景
        });

        document.getElementById('editButton').style.display = 'inline';
        document.getElementById('saveButton').style.display = 'none';
    });
    const avatar = document.getElementById('avatar');
    const fileInput = document.getElementById('fileInput');

    avatar.addEventListener('click', () => {
        fileInput.click();
    });

    fileInput.addEventListener('change', () => {
        const file = fileInput.files[0];
        if (file) {
            const formData = new FormData();
            formData.append('image', file);

            const userId = localStorage.getItem('userId');
            if (userId) {
                formData.append('userId', userId);
            }

            fetch('http://localhost:8080/upload', {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1) {
                        avatar.src = data.data; // 更新头像URL
                        localStorage.setItem('avatar', data.data); // 保存头像URL到 localStorage
                    } else {
                        alert('上传失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('上传出错');
                });
        }
    });

</script>
</body>
</html>
